import { App, Checkbox } from 'antd'
import cs from 'classnames'
import Image from 'next/image'
import { Dispatch, SetStateAction, useState } from 'react'

import { EnumsRes, Violation } from '@/api/interface'
import { CreateViolation } from '@/api/modules'
import arrowPre from '@/assets/images/arrow-pre.png'
import file from '@/assets/images/file.png'
import store from '@/store'

import styles from '../styles/index.module.less'

interface Props {
  t: any
  lang: string
  enums: { [key: string]: EnumsRes[] }
  violation: Partial<Violation>
  setSetup: Dispatch<SetStateAction<number>>
}

export default function ReviewAndConfirm({ t, lang, enums, violation, setSetup }: Props) {
  const { message } = App.useApp()

  const [checked, setChecked] = useState(false)

  const filterEnum = (key: string, type: string) => {
    if (!key) return '--'
    const item = enums[type]?.find((item) => item.key === key)!
    return <>{item.value[lang === 'en-US' ? 'en' : 'ar']}</>
  }

  const submit = async () => {
    if (!checked) return message.warning(t['form.confirm.checkbox.warning'])
    const params = JSON.parse(JSON.stringify(violation))
    delete params.violationDateValue
    delete params.complaintDateValue
    delete params.emirateEntityName
    params.eid = params.eid.replace(/-/g, '')
    params.emirateEntity = violation.emirateEntity === -1 ? '' : violation.emirateEntity
    params.emirateEntityOther = violation.emirateEntity === -1 ? violation.emirateEntityOther : ''
    
    await CreateViolation({ ...params, source: 'EMAIL' })
    store.dispatch({ type: 'update-website-token', payload: { token: '' } })
    setSetup(5)
  }

  return (
    <div className={styles['form-confirm']}>
      <h2 className={styles['form-title-h2']}>{t['form.confirm.title']}</h2>
      <div className={styles['form-confirm-line']}></div>
      <div className={styles['form-item-label']}>{t['form.confirm.personal.title']}</div>
      <div className={styles['form-confirm-descriptions']}>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.fullName']}</span>
            <span className={styles['form-descriptions-value']}>{violation.fullName ?? '--'}</span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.personal.nationality']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {filterEnum(violation.nationality!, 'Nationality')}
            </span>
          </div>
        </div>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.personal.complainant']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {filterEnum(violation.complainantRole!, 'Complainant')}
            </span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.personal.emiratesID']}
            </span>
            <span className={styles['form-descriptions-value']}> {violation.eid ?? '--'}</span>
          </div>
        </div>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.email']}</span>
            <span className={styles['form-descriptions-value']}>{violation.email ?? '--'}</span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.mobile']}</span>
            <span className={cs(styles['form-descriptions-value'], 'ltr')}>
              {violation.mobile ? `+971${violation.mobile}` : '--'}
            </span>
          </div>
        </div>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.personal.unifiedNumber']}</span>
            <span className={styles['form-descriptions-value']}>{violation.unifiedNumber ? violation.unifiedNumber : '--'}</span>
          </div>
        </div>
      </div>

      <div className={styles['form-confirm-line']}></div>

      <div className={styles['form-item-label']}>{t['form.confirm.complaint.title']}</div>
      <div className={styles['form-confirm-descriptions']}>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.complaint.emirate']}{' '}
            </span>
            <span className={styles['form-descriptions-value']}>
              {filterEnum(violation.emirate!, 'Emirate')}
            </span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.complaint.entityName']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {(violation.emirateEntity === -1
                ? violation.emirateEntityOther
                : violation.emirateEntityName) ?? '--'}
            </span>
          </div>
        </div>
        <div className={styles['form-descriptions-wrap']}>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>{t['form.complaint.type']}</span>
            <span className={styles['form-descriptions-value']}>
              {filterEnum(violation.violationType!, 'ViolationType')}
            </span>
          </div>
          <div className={styles['form-descriptions-item']}>
            <span className={styles['form-descriptions-label']}>
              {t['form.complaint.violationDate']}
            </span>
            <span className={styles['form-descriptions-value']}>
              {violation.violationDate ?? '--'}
            </span>
          </div>
        </div>
        <div className={styles['form-descriptions-item-hundred']}>
          <span className={styles['form-descriptions-label']}>
            {t['form.confirm.reported.title']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.hasReported
              ? t['form.complaint.reported.radio.yes']
              : t['form.complaint.reported.radio.no']}

            {violation.hasReported
              ? ` (${t['form.complaint.entityName']}: ${violation.refEntity ?? '--'}; ${
                  t['form.complaint.reference']
                }: ${violation.refRefNumber ?? '--'}; ${t['form.complaint.complaintDate']}: ${
                  violation.refYear
                })`
              : ''}
          </span>
        </div>
        <div
          className={cs(
            styles['form-descriptions-item-hundred'],
            styles['form-descriptions-item-phone']
          )}
        >
          <span className={styles['form-descriptions-label']}>
            {t['form.complaint.description']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.violationDesc ? violation.violationDesc: '--'}
          </span>
        </div>
      </div>

      <div className={styles['form-confirm-line']}></div>

      <div className={styles['form-item-label']}>{t['form.confirm.additional.title']}</div>
      <div className={styles['form-confirm-descriptions']}>
        <div
          className={cs(
            styles['form-descriptions-item-hundred'],
            styles['form-descriptions-item-phone']
          )}
        >
          <span className={styles['form-descriptions-label']}>
            {t['form.complaint.additional']}
          </span>
          <span className={styles['form-descriptions-value']}>
            {violation.violationAdditionalDetails ?? '--'}
          </span>
        </div>
        {violation.violators?.length ? (
          <div
            className={cs(
              styles['form-descriptions-item-hundred'],
              styles['form-descriptions-item-phone']
            )}
          >
            <span className={styles['form-descriptions-label']}>
              {t['form.confirm.witnesses.title']}
            </span>
            <span className={styles['form-descriptions-value']}>
              <div className={styles['form-confirm-witnesses']}>
                {violation.violators?.map((item, index) => {
                  return (
                    <span className={styles['form-descriptions-value']} key={index}>
                      {item?.concernedParties ?? '--'}
                      <span className="mr-2 ml-2">/</span>
                      {filterEnum(item?.role, 'ViolatorOrWitness')}
                      <span className="mr-2 ml-2">/</span>
                      {filterEnum(item?.nationality, 'Nationality')}
                    </span>
                  )
                })}
              </div>
            </span>
          </div>
        ) : (
          <></>
        )}
        {violation.supportEntities?.length ? (
          <div
            className={cs(
              styles['form-descriptions-item-hundred'],
              styles['form-descriptions-item-phone']
            )}
          >
            <span className={styles['form-descriptions-label']}>
              {t['form.complaint.attachments']}
            </span>
            <span className={styles['form-descriptions-value']}>
              <div className={styles['form-confirm-file']}>
                {violation.supportEntities!.map((item, index) => {
                  return (
                    <div className={styles['form-confirm-file-item']} key={index}>
                      <Image src={file} className={styles['file-icon']} alt="file" />
                      <span className={styles['file-text']}>{item.href}</span>
                    </div>
                  )
                })}
              </div>
            </span>
          </div>
        ) : (
          <></>
        )}
      </div>
      <div className={styles['form-confirm-line']}></div>
      <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
        {t['form.confirm.checkbox']}
      </Checkbox>
      <div className={styles['form-button']}>
        <div className={styles['form-button-pre']} onClick={() => setSetup(3)}>
          <Image src={arrowPre} className={styles['button-icon']} alt="pre" />
          <span className={styles['button-text']}>{t['form.button.previous']}</span>
        </div>
        <div className={styles['form-button-next']} onClick={() => submit()}>
          <span className={styles['button-text']}>{t['form.button.submit']}</span>
        </div>
      </div>
    </div>
  )
}
